<template>
  <div>
    <img src="../assets/登录页-1.jpg" alt="">
    <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="用户名"
    label="用户名"

    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">立即登录</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
export default {
 data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
  },
}
</script>

<style lang='less' >
img{
  width: 100%;
  height: 100%;
  position: absolute;
}
.van-form{
  width: 2.2rem;
  position: relative;
  top: 3.8rem;
  left: 0.80rem;
  z-index: 2;
  .van-field{
    margin: .14rem;
    span{
      color: black;
    }
  }
  .van-button{
    background: #4267fe;
    width: 1.58rem;
    height: .48rem;
    margin: .61rem auto;
  }
  .van-cell{
    border-radius: .18rem;
     background: #ffcd33;
     height: .36rem;
    border-radius: .34rem;
  }
  .van-cell__title{
    width: .5rem;
  }
}
</style>